// dom.js是dom操作方法
export function addClass (el, className) {
  // 如果判断class是有的情况下，直接跳出语句，如果没有，再执行添加语句
  if (hasClass(el, className)) {
    return
  }
  // 把元素的class名用split内置方法来通过空格分解成数组，使用了className内置属性
  // child.slider-item是个空字符串，空字符串用split后，newClass就是有一个空字符的数组
  let newClass = el.className.split(' ')
  // 数组最后元素添加slider-item字符串
  newClass.push(className)
  // ['','slider-item'].join(' ')，给child.slider-item即''赋值。join数组内置方法是把它的所有元素放入一个字符串
  el.className = newClass.join(' ')
}
// hasClass函数用来判断是否有class
export function hasClass (el, className) {
  // 创建正则
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  // 用正则的test内置方法，用于检测一个字符串是否匹配某个模式
  return reg.test(el.className)
}

// 给listview.vue抽取出来一个方法
export function getData (el, name, val) {
  // 属性名有固定和变化的两部分，所以需要拼接
  const prefix = 'data-'
  // 用个变量装这个两个字符串的拼接，省却代码
  name = prefix + name
  // 如果val有值，给目标对象设置属性，并且把val值赋予给它
  if (val) {
    return el.setAttribute(name, val)
    // 如果没有val值,就获取目标对象的属性值
  } else {
    return el.getAttribute(name)
  }
}

// 给music-list等组件中js兼容的封装
// 创建一个div,取它的样式
let elementStyle = document.createElement('div').style
let vendor = (() => {
  let transformNames = {
    // 各大常用浏览器前缀
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    // style中如果有就执行key
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }
  // 如果都没有就是浏览器有问题
  return false
})()

export function prefixStyle (style) {
  // 如果都没有就是浏览器有问题
  if (vendor === false) {
    return false
  }
  // 如果是standard，就是说普通的
  if (vendor === 'standard') {
    return style
  }
  // 如果是其他浏览器，那就输出，比如说这个webkit+T+arsform
  // style字符串的第一个字符转换成大写
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
